@guardian/src-foundations

Foundations

The Guardian's foundations are the atoms from which all our visual design is built. They are intended for use with a CSS-in-JS library such as Emotion.

Install

$ yarn add @guardian/src-foundations

Use

Palette

import { background } from "@guardian/src-foundations/palette"

const backgroundColor = css`
    background-color: ${background.primary};
`

Typography

import { headline, body, textSans } from "@guardian/src-foundations/typography"

const h1 = css`
    ${headline.large({ fontWeight: "bold" })};
`

const p = css`
    ${body.main()};
`

const copyright = css`
    ${textSans.xsmall()};
`

Media queries

import { from, until, between } from "@guardian/src-foundations/mq"

const styles = css`
    padding: 0 10px;

    ${from.mobileLandscape} {
        padding: 0 20px;
    }

    ${between.phablet.and.desktop} {
        padding: 0 32px;
    }

    ${until.wide} {
        padding: 0 40px;
    }
`

Size

import { width, height } from "@guardian/src-foundations/size"

const checkbox = css`
    width: ${width.inputXsmall}px;
    height: ${height.inputXsmall}px;
`

Visually Hidden

For elements that should not appear to sighted users, but are useful to assistive technology users.

import { visuallyHidden } from "@guardian/src-foundations/accessibility"

const label = css`
    ${visuallyHidden};
`

Focus Halo

This mixin provides a clear focus state for elements that may receive keyboard focus.

import { focusHalo } from "@guardian/src-foundations/accessibility"

const input = css`
    ${focusHalo};
    width: 200px;
    height: 44px;
`

Description Id

A function that takes the ID of an element and generates a new ID. This should be set as the ID of an element that describes the first element. The generated ID should also be passed to the aria-describedby attribute on the first element.

import { descriptionId } from "@guardian/src-foundations/accessibility"

const Form = () => {
    const id = "first_name"
    return (
        <form>
            <input id={id} type="text" aria-describedby={descriptionId(id)} />
            <p class="error" id={descriptionId(id)} />
        </form>
    )
}